<template>
  <div class="height100 flex  " v-loading="loading" :class="is_close?'close_nav':''" @mouseup="mouseup">
    <!-- <div class="common_tt flex_ac">
      <a href="javascript:;" @click="$router.go(-1);" class="back"><img src="@/assets/back.png" alt=""></a>
      <div class="title pad_lr20">{{title}}</div>
    </div> -->
    <div class="bg_fff margin_r10 left_data">
      <div class="tt" v-if="tk_data.all_score">{{tk_data.all_score}}</div>
      <div class="item flex_ac" v-for="(item,index) in tk_data.list" :key="index">
        <div class="flex1">
          {{item.title}} <span class="margin_l10">({{item.num}}题)</span>
        </div>
        <span class="bl margin_a">{{item.all_score}}分</span>
      </div>
    </div>
    <div class="flex1 flex flex_d bg_fff" style="border-radius: 10px;">
      <!-- <div class="pro_nav height100">
        <Pronav2 />
        <img src="@/assets/close.png" @click="is_close=!is_close" class="close" alt="">
      </div> -->
      <div class="flex_s pad_lr30">
        <div class="f16 pad_tb20"><span class="color">题库列表</span> / 题库</div>
        <el-form :model="queryParams" ref="queryForm"  label-width="104px">
          <el-row class="flex">
            <FormItem label="题目名称" class="bg_form_item" type="input" :form="queryParams" @keyenter="handleQuery" prop="keywords" clearable />
            <div class="search_btns">
              <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
            </div>
            <div class="flex_ac margin_a">

              <el-popover
                placement="left"
                width="213"
                trigger="hover" v-model="show_ans">
                <div class="tab_ans_list flex flex_w">
                  <a href="javascript:;" v-for="(item,index) in list" @click="to_ans(index)" :key="index"><div>{{index+1}}</div></a>
                </div>
                <el-button plain slot="reference" style="margin-bottom: 22px; margin-right: 10px;" icon="el-icon-notebook-1">快速切题</el-button>
              </el-popover>

              <!-- <el-button type="primary" style="margin-bottom: 22px;margin-right: 15px;" plain @click="handleEditScore()" v-if="have_auth('/answer/editscore')">分数组合</el-button> -->
              <el-button  style="margin-bottom: 22px;margin-right: 15px;" plain @click="handleView()" icon="el-icon-collection">答题预览</el-button>


              <div style="margin-bottom: 22px;">
                <el-dropdown trigger="click" @command="try_handleEdit">
                  <el-button type="primary" icon="el-icon-plus" >添加题目</el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="item.id" v-for="(item,index) in types" :key="index">{{item.title}}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </el-row>
        </el-form>

        <div class="flex_ac pad_b10 pl">
          <el-button plain >
            <el-checkbox v-model="checked" @change="check_all">全选</el-checkbox>
          </el-button>
          <el-button plain @click="handleDelete()" icon="el-icon-delete" size="normall">
            批量删除
          </el-button>

          <a href="javascript:;" class="margin_a color flex_ac"  @click="is_move=!is_move"><img src="@/assets/answer3.png" style="margin-right: 5px;" alt="">{{is_move?'取消排序':'排序'}}</a>
        </div>
      </div>
      <div class="flex1 page_div js_page_div">
        <el-scrollbar class="page_div_scroll" ref="scrollbar">
          <div class="answers_list"  :class="is_move?'move_item':''">

            <div class="item" :id="'item'+index" :class="move_index==index?'ac':''" :style="move_index==index?('left:'+ex+'px;top:'+ey+'px;z-index:2; border:1px solid #004EA2;'):''" @mousedown="mousedown($event,index)" @mousemove="mousemove"  v-for="(item,index) in list" :key="index">
              <div class="tt flex_ac"><el-checkbox v-model="item.is_check" @change="check_item($event,index)"></el-checkbox><span class="margin_l10">{{index+1}}. 【题目ID：{{item.id}}】【{{type_text[item.type] || '未知'}}】<span class="answer_tt" v-html="item.title"></span></span>
                <div class=" op_pp margin_a flex_s">
                  <div class="flex_ac" style="justify-content: flex-end;">
                    <a href="javascript:;" class="margin_l20 color_red" @click="handleDelete(item)" ><img src="@/assets/answer1.png" alt="">删除</a>
                    <a href="javascript:;" class="margin_l20 color" @click="handleEdit(item)" ><img src="@/assets/ans_edit.png" alt="">编辑</a>
                    <a href="javascript:;" class="margin_l20 color" @click="try_set_logic(item)" v-if="item.type==1"><img src="@/assets/answer2.png" alt="">逻辑</a>
                    <!-- <a href="javascript:;" class="margin_l20 color" @click="try_set_auto(item)" v-if="(item.type==1 || item.type==2) && have_auth('/answer/answerlist/auto')"><img src="@/assets/answer2.png" alt="">自动选择</a> -->
                    <a href="javascript:;" class="margin_l20 color" @click="try_set_func(item)" ><img src="@/assets/answer2.png" alt="">公式设定</a>

                    <!-- <a href="javascript:;" class="margin_l20 color js_sort" @mousedown="mousedown($event,index)" @mousemove="mousemove" @mouseup="mouseup"><img src="@/assets/answer3.png" alt=""></a> -->
                  </div>
                  <!-- <div style="text-align: right;" v-if="!is_move">
                    <span style="color: #A6A8B2;">提交时间：{{item.update_time}}</span>
                  </div> -->
                </div>
              </div>
              <div class="ans flex_ac flex_w pad_tb30" v-if="item.type!=5 && item.type!=6 && item.type!=7">
                <div class="item_d" v-for="(item2,index2) in item.answer" :key="item2.id">
                  <!-- <el-radio v-model="radio" label="1"></el-radio> -->{{item2.answer_title}}<span style="color: #FF9D00;">【{{item2.score}}分】</span><span class="zhuan_span" v-if="item2.jump_logic"><img src="@/assets/z.png" alt="">{{get_jump_text(item2.jump_logic)}}</span>
                </div>
              </div>

              <div class="pad_tb30" v-if="item.type==5 || item.type==6 || item.type==7">

                <el-table :data="item.jz_ques">
                  <el-table-column label="" align="left">
                    <template slot-scope="scope">
                      {{scope.row.answer_title}}
                    </template>
                  </el-table-column>
                  <el-table-column :label="item3.answer_title" v-for="(item3,index3) in item.jz_ans" :key="index" align="center">
                    <template slot-scope="scope">
                      <el-radio label="" v-if="item.type==5" disabled></el-radio>
                      <el-checkbox v-if="item.type==6" disabled></el-checkbox>
                      <el-input  v-if="item.type==7" disabled readonly></el-input>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div v-if="item.bak_desc" class="bak_desc">{{item.bak_desc}}</div>
              <div style="text-align: center; width: 100%;" v-if="item.answer.length==0">
                <Nodata text="暂无选项" />
              </div>
            </div>
          </div>
          <Nodata v-if="list.length==0" text="暂无数据" />
          <!-- <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.page_size"
            @pagination="getList"
          /> -->

        </el-scrollbar>

      </div>
    </div>
    <!-- 上传图片预览 -->
    <el-dialog :close-on-click-modal="true" append-to-body @closed="video_url=''" width="1200px" v-dialogDrag :visible.sync="uploadImgVisible">
      <!-- <img width="100%" :src="uploadImageUrl" alt=""> -->
      <video :src="video_url" controls autoplay style="width: 100%; height: 650px;"></video>
      <div class="pad_t20"></div>
    </el-dialog>
    <setLogic ref="setLogic" @after_logic="getList" />
    <autoSele ref="autoSele" />
    <setFunc ref="setFunc" />



  </div>
</template>

<script>
  import setLogic from "./setLogic.vue";
  import autoSele from "./autoSele.vue";
  import setFunc from "./setFunc.vue";
import $ from "jquery";
export default {
  name: 'shopList',
  components: {setLogic,autoSele,setFunc},
  data () {
    return {
      loading:true,
      is_ajax:false,
      show_filter:true,
      is_close:false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10000000,
        keywords: undefined
      },
      statusOptions: [{label:'启用',value:'0'},{label:'停用',value:'1'}],
      openOptions: [{label:'当前页面打开',value:0},{label:'新页面打开',value:1}],
      open:false,
      radio:'',
      uploadImgVisible:false,
      video_url:"",
      checked:false,
      title:'',
      types:[],
      type_text:{1:'单选题',2:'多选题',3:'填空题',4:'描述题',5:'矩阵单选题',6:'矩阵多选题',7:'矩阵填空题'},



      ox:0,
      oy:0,
      is_move:false,
      move_index:null,
      ex:0,
      ey:0,

      openview:false,
      show_ans:false,
      tk_data:{
        all_score:'',
        list:[]
      }

    }
  },
  created() {
    this.id=this.$route.query.id || '';
    this.queryParams.q_id=this.id;
    this.title=this.$route.query.title || '';
    this.getList();
    this.get_options()
  },
  methods:{
    to_ans(index){
      this.$refs.scrollbar.wrap.scrollTop=$('#item'+index).offset().top+$('.el-scrollbar__wrap').scrollTop()-$('.js_page_div').offset().top;
      // console.log()
      this.show_ans=false;
    },
    get_sub_num(sub_id){
      for(let i=0;i<this.list.length;i++){
        if(this.list[i].id==sub_id){
          return (i+1)
        }
      }
    },
    handleView(){
      this.$router.push({ //核心语句
        path: '/answer/answerview?id='+this.id+'&title='+this.title,
      })
    },
    get_jump_text(obj){
      let item=JSON.parse(obj);
      let sub_id=item.subject_id;
      if(sub_id && sub_id!=0){
        return '转第'+this.get_sub_num(sub_id)+'题'
      }else{
        let rules=JSON.parse(item.rules);
        let text=''
        for(let i=0;i<rules.length;i++){
          text+='若值'+rules[i].symbol+rules[i].constant+',则转第'+this.get_sub_num(rules[i].subject_id)+'题；'
        }
        return text;
      }

    },
    mousedown(e,index){
      if(!this.is_move){return false;}
      this.ox=e.pageX;
      this.oy=e.pageY;
      this.ex=0;
      this.ey=0;
      this.move_index=index;
    },
    mousemove(e){
      if(!this.is_move || this.move_index==null){return false;}
      this.ex=e.pageX-this.ox;
      this.ey=e.pageY-this.oy;

    },
    mouseup(e){
      if(!this.is_move || this.move_index==null){return false;}
      let items=$('.move_item .item');
      let ac_y=items.eq(this.move_index).offset().top+parseInt(items.eq(this.move_index).css('height'))*0.5;
      let is_find_index=null;
      for(let i=0;i<items.length;i++){
        if(i!=this.move_index){
          let y=items.eq(i).offset().top+parseInt(items.eq(i).css('height'))*0.5;
          if(ac_y<=y){
            is_find_index=i;
            break;
          }
        }
      }
      let id=this.list[this.move_index].id


      if(is_find_index==null){
        is_find_index=items.length
      }
      console.log(is_find_index,this.move_index)
      this.list.splice(is_find_index>this.move_index?(is_find_index-1):is_find_index,0,this.list.splice(this.move_index,1)[0]);

      this.move_index=null;
      this.set_sort(id)
    },
    set_sort(id){
      let ids=[];
      for(let i=0;i<this.list.length;i++){
        ids.push(this.list[i].id)
      }
      console.log(id)
      const _this=this;
      _this.axios.post("/api/subject.SubjectOperate/set_order", {subject_id:id,q_id:_this.id,sort_ids:ids.join(',')}).then(function(res) {
        if(res){
          _this.tip_show('操作成功','success')
          _this.getList();
        }
      }).catch(function(error) {
        console.log(error);
      })
      console.log(id,ids);
    },
    check_all(e){
      for(let i=0;i<this.list.length;i++){
        this.list[i].is_check=e
      }
    },
    get_checked_ids(){
      let arr=[];
      for(let i=0;i<this.list.length;i++){
        if(this.list[i].is_check){
          arr.push(this.list[i].id)
        }
      }
      return arr
    },
    check_item(e,i){
      this.list[i].is_check=e;
      if(this.get_checked_ids().length==this.list.length && !this.list.length==0){
        this.checked=true;
      }else{
        this.checked=false;
      }
      this.$forceUpdate();
    },
    try_set_auto(row){
      this.$refs.autoSele.init(row,this.id)
    },
    try_set_func(row){
      this.$refs.setFunc.init(row,this.id)
    },
    try_set_logic(row){
      this.$refs.setLogic.init(row,this.id)
    },
    handleEditScore(){
      this.$router.push({ //核心语句
        path: '/answer/editscore?modelid='+this.id
      })
    },
    try_handleEdit(e){
      this.$router.push({ //核心语句
        path: '/answer/addsubject?type='+e+'&modelid='+this.id
      })
    },
    handleEdit(row){
      this.$router.push({ //核心语句
        path: '/answer/addsubject?type='+row.type+'&modelid='+this.id+'&id='+row.id
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      let ids=row?[row.id]:this.get_checked_ids();
      const _this=this;
      if(ids.length==0){return false}
      this.$confirm('您确定删除吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.axios.post("/api/subject.SubjectOperate/del_subject", {subject_ids:ids}).then(function(res) {
            if(res){
              _this.tip_show('操作成功','success')
              _this.getList();
            }
          }).catch(function(error) {
            console.log(error);
          })
        })
    },
    get_options(){

      const _this=this;
      this.loading = true;
      _this.axios.get("/api/subject.SubjectOperate/subject_type_data", {params:{}}).then(function(res) {
        if(res){
          _this.types=res.message
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/subject.SubjectList/index", {params:this.queryParams}).then(function(res) {
        if(res){
          for(let i=0;i<res.message.length;i++){
            res.message[i].is_check=false;
            let arr1=[];
            let arr2=[];
            if(res.message[i].type==5 || res.message[i].type==6 || res.message[i].type==7){
              for(let k=0;k<res.message[i].answer.length;k++){
                if(res.message[i].answer[k].quadrant==2){
                  arr1.push(res.message[i].answer[k])
                }else{
                  arr2.push(res.message[i].answer[k])
                }

              }

            }
            res.message[i].jz_ques=arr1;
            res.message[i].jz_ans=arr2
          }
          _this.list = res.message;
          _this.loading = false;
        }
      }).catch(function(error) {
        console.log(error);
      })
      _this.axios.get("/api/subject.SubjectList/subject_category", {params:{q_id:this.id}}).then(function(res) {
        if(res){
          _this.tk_data=res.message
        }
      }).catch(function(error) {
        console.log(error);
      })



    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams= {
        page: 1,
        page_size: 10000000,
        keywords: undefined,
        q_id:this.id
      };
      this.handleQuery();
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.answers_list .item .tt{background: #E9EFF5;}
.answers_list .ans{background: #F9FAFC; border-radius: 4px; overflow: hidden; padding:  20px 16px;}
.answers_list .ans .item_d{width: 100%; padding: 5px 0;}

.answers_list.move_item .item .el-checkbox{display: none;}
.answers_list.move_item .item{cursor: move;user-select:none; position: relative;}
.answers_list.move_item .item a{display: none;}
.answers_list.move_item .item a.js_sort{display: flex;}
.answers_list.move_item .item .ans{display: none;}
.answers_list.move_item .item{margin-bottom: 10px;}
.zhuan_span{background:#FFEACB; color: #1F2329; line-height: 28px; padding: 0 12px 0 0; display: inline-block; border-radius: 28px;}
.zhuan_span img{width: 24px; margin-right: 7px; margin-left: 2px; margin-top: 2px; float: left;}
/* .js_sort{cursor: move;}
.js_sort img{ -webkit-user-select:none;pointer-events: none;-webkit-user-drag: none;
  -moz-user-selectt:none;
  -khtml-user-selectt:none;
  -ms-user-selectt:none;} */
.tab_ans_list a{display: block; margin-right: 5px; margin-bottom: 5px; color: #666; text-align: center; line-height: 30px; width: 32px; border: 1px solid #eee;}
.tab_ans_list a:hover{color: #004EA2; border-color: #004EA2;}
.bak_desc{line-height:1.2; padding: 8px 15px; color: #666; background: #eff7ff; font-size: 14px;}
.left_data{padding: 15px; border-radius: 10px; width: 270px; overflow: auto;}
.left_data .item{margin-bottom: 12px; padding: 10px 15px; border-radius: 8px; border: 1px solid #E5E5E5; line-height: 1.2; font-size: 14px; font-weight: bold; color: #1D2129;}
.left_data .item span{font-size: 13px; color: #666; font-weight: normal;}
.left_data .item span.bl{color: #325FFF;}
.left_data .tt{margin-bottom: 15px; font-size: 15px; font-weight: bold;}
.move_item .bak_desc{display: none;}
.answers_list a{font-size: 14px;}
</style>
